<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>菜单</title>

    <!-- Bootstrap -->
    <link href="{:config('__public__')}/static/bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<style type="text/css">
    .Level1{
        line-height: 25px;
        border-color: #ebebeb;
        border: 1px solid #ebebeb;
        margin-bottom: 20px;
    }
    .level1title{
        background-color: #CCEEFF; 
    }
    .level2title{
        background-color: #DDDDDD;
    }
    .divOver{
        background-color: #CCFF99;
    }
    span{
        margin-right: 10px;
    }
    .menu_hide{
        background-color: #DDAA00;
    }
    .menu_dev{
        background-color: #FF8888;
    }
    .menu_delete{
        background-color: #FF3333;
    }
</style>
<h3>菜单</h3>
<div class="container" style="margin-bottom: 20px;">

    <span class="menu_hide" style="padding: 5px;"> 隐藏菜单 </span>
    <span class="menu_dev" style="padding: 5px;"> 开发者菜单 </span>
    <!-- <span class="menu_delete" style="padding: 5px;"> 删除的菜单 </span> -->
    <!-- <a class="btn btn-info btn-sm pull-right" href="{:url('tree_show', ['module'=>input('module')])}">查看全部菜单</a> -->
</div>
<div class="container">
    {volist name="_menuTree" id="vo1"}
    <div class="Level1">
    <div class="level1title onerow">
        <!-- level1-title -->
        <span id="{$vo1.id}"
        {if condition="($vo1['hide'] == 1)"} 
            class="menu_hide"
        {/if}
        {if condition="($vo1['is_dev'] == 1)"} 
            class="menu_dev"
        {/if}
        >
        {$vo1.title} &nbsp;&nbsp;({$vo1.module}/{$vo1.controller}/{$vo1.action})({$vo1.url})
        [{$vo1.hide}][{$vo1.is_dev}]
        </span>
        <!-- /level1-title -->
        {empty name="vo1['_child']"}
        <span class="pull-right">
            <a href="{:url('edit?id='.$vo1['id'].'&menu_module='.$vo1['module'])}">编辑</a>
            <a class="ajaxGet confirm" href="{:url('del?id='.$vo1['id'])}">删除</a>
        </span>
        {/empty}
    </div>
        <!-- level2 -->
        {notempty name="vo1['_child']"}
        <div class="level2">
        {volist name="vo1['_child']" id="vo2"}
        <div class="level2title onerow">
            <!-- level2-title -->
            <span id="{$vo2.id}"
            {if condition="($vo2['hide'] == 1)"} 
                class="menu_hide"
            {/if}
            {if condition="($vo2['is_dev'] == 1)"} 
                class="menu_dev"
            {/if}
            >
            &nbsp;&nbsp;├─{$vo2.title}  &nbsp;&nbsp;({$vo2.module}/{$vo2.controller}/{$vo2.action})({$vo2.url})
            [{$vo2.hide}][{$vo2.is_dev}]
            </span>
            <!-- /level2-title -->
            {empty name="vo2['_child']"}
            <span class="pull-right">
                <a href="{:url('edit?id='.$vo2['id'].'&menu_module='.$vo2['module'])}">编辑</a>
                <a class="ajaxGet confirm" href="{:url('del?id='.$vo2['id'])}">删除</a>
            </span>
            {/empty}
        </div>
            <!-- level3 -->
            {notempty name="vo2['_child']"}
            <div class="level3">
            {volist name="vo2['_child']" id="vo3"}
            <div class="onerow">
            <!-- level3-title -->
            <span id="{$vo3.id}"
            {if condition="($vo3['hide'] == 1)"} 
                class="menu_hide"
            {/if}
            {if condition="($vo3['is_dev'] == 1)"} 
                class="menu_dev"
            {/if}
            >
            &nbsp;&nbsp;│&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
            {if condition="$i eq count($vo2['_child'])"}
            └─
            {else /}
            ├─
            {/if}
            {$vo3.title} &nbsp;&nbsp;({$vo3.module}/{$vo3.controller}/{$vo3.action})({$vo3.url})
            [{$vo3.hide}][{$vo3.is_dev}]
            </span>
            <!-- /level3-title -->
            <span class="pull-right">
                <a href="{:url('edit?id='.$vo3['id'].'&menu_module='.$vo3['module'])}">编辑</a>
                <a class="ajaxGet confirm" href="{:url('del?id='.$vo3['id'])}">删除</a>
            </span>
            </div>
            {/volist}
            </div>
            {/notempty}
            <!-- /level3 -->
        {/volist}
        </div>
        {/notempty}
        <!-- /level2 -->
    </div>
{/volist}
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="{:config('__public__')}/static/artDialog-6.0.4/css/ui-dialog.css">
<script src="{:config('__public__')}/static/artDialog-6.0.4/dist/dialog-min.js"></script>
<script src="{:config('__public__')}/Admin/js/ajaxSubmit.js"></script>

<script language="javascript">
 $(function(){
  //当鼠标滑入时将div的class换成divOver
  $('.onerow').hover(function(){
    $(this).addClass('divOver');  
   },function(){
    //鼠标离开时移除divOver样式
    $(this).removeClass('divOver'); 
   }
  );
 });
</script>
</body>
</html>